/* pages/vip/vip.wxss */
page {
  background: #f1f4f8;
}
.header_bg {
  width: 140%;
  height: 600rpx;
  background: #4b5362;
  border-radius: 100%;
  position: absolute;
  top: -200rpx;
  left: -20%;
  z-index: -1;
}

.member-nav-height {
    height: 170rpx;
}
.member-nav {
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 170rpx;
    background-color: #222426;
    overflow: hidden;
}
.member-nav__box {
    background: transparent !important;
}
.member-nav__arrow {
    color: #fff;
    font-size: 40rpx !important;
    margin-left: -10rpx;
}
.member-nav__title {
    color: #fff;
    font-weight: bold;
}
.member-nav__bg {
    position: absolute;
    width: 100vw;
    height: 628rpx;
    top: 0;
    left: 0;
    z-index: -1;
}
.swiper {
    width: 100vw;
    height: 294rpx;
    margin-top: 0rpx;
    margin-bottom: 20rpx;
}
.swiper .swiper-item__bottom {
    line-height: 1;
        position: absolute;
        top: 130rpx;
        width: 500rpx;
        left: 127rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #c0c4cc;
        height: 150rpx;
        display: flex;
        justify-content: space-between;
}
.swiper .swiper-item__bottom .bottom-left text {
    color: #ffffff;
}
.swiper .swiper-item__bottom .bottom-right {
    font-size: 24rpx;
    font-weight: 500;
    color: #c0c4cc;
    line-height: 1.2;
}
.swiper .swiper-item__bottom .swiper-progress {
    width: 320rpx;
    height: 12rpx;
    margin: 20rpx 0;
    background: #4c5158;
    border-radius: 6rpx;
}
.swiper .swiper-item__bottom .swiper-progress__bg {
    width: 70%;
    height: 12rpx;
    background: linear-gradient(90deg, #8d95a3, #d3dbeb);
    border-radius: 6rpx;
}
.vip-details{
	    width: 114rpx;
	    height: 48rpx;
	    background: #FFFFFF;
	    border-radius: 24rpx 0rpx 0rpx 24rpx;
	    opacity: 0.7;
	    font-size: 22rpx;
	    font-family: PingFang SC-Medium, PingFang SC;
	    font-weight: 400;
	    color: #6E6E6E;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		position: absolute;
		    top: 15px;
		    right: 5px;
}
.dfsaf {
    width: 685rpx;
    height: 294rpx;
    background-color: red;
}
swiper {
    width: 100%;
    height: 100%;
}
.my_privilege {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #303133;
    margin-left: 40rpx;
    margin-bottom: 31rpx;
}
/* .privilege_item{
  width: 100%;   
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: red;
} */
.privilege_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.privilege_list_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.privilege_icon {
    width: 100rpx;
    height: 100rpx;
}
.privilege_name {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #606266;
    margin-top: 10rpx;
}
.copy_right {
    position: fixed;
    bottom: 36rpx;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #909399;
}
.instructions {
    top: 20rpx;
    right: 39rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c0c4cc;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 39rpx;
    margin-bottom: 20rpx;
}
.instructions_img {
    width: 30rpx;
    height: 30rpx;
    margin-left: 9rpx;
}
swiper-item > image {
    width: 685rpx;
    height: 300rpx;
}
.vip_name {
    position: absolute;
    top: 44rpx;
    left: 70rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    justify-content: start;
    align-items: center;
}
.vip_type {
    font-size: 42rpx;
    font-family: PingFang SC;
    font-weight: bold;
    margin: 0 24rpx;
    color: #ffffff;
}
.vip_grade {
    width: 128rpx;
    height: 42rpx;
    border-radius: 21rpx;
    font-size: 24rpx;
    line-height: 42rpx;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c0c4cc;
    border: 1rpx solid #c0c4cc;
}
.vip_name_icon {
    width: 40rpx;
    height: 35rpx;
}
.vip_time {
    position: absolute;
    top: 143rpx;
    left: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #d1836e;
}
.progress {
    width: 100%;
    position: absolute;
    top: 207rpx;
    left: 120rpx;
    width: 350rpx;
    height: 12rpx;
    background: linear-gradient(90deg, #f5f6fa, #f0f0f0);
    border-radius: 6rpx;
}
.progress_nums {
    position: absolute;
    top: 260rpx;
    left: 120rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
}
.progress_nums:nth-child(5) {
    color: #999999;
}
.progress_nums_text {
    font-size: 26rpx;
    color: #b34e32;
    margin: 0 5rpx;
}
.progress-box {
    width: 100%;
}
.vip_integral {
    position: absolute;
    top: 130rpx;
    left: 60rpx;
    font-size: 24rpx;
    color: #ffffff;
}
.discount {
    width: 560rpx;
    font-size: 26rpx;
    position: absolute;
    top: 260rpx;
    left: 50rpx;
    display: flex;
    flex-wrap: wrap;
}
.discount > view {
    width: 280rpx;
    height: 50rpx;
    color: #e5e6ed;
    overflow: hidden;
    position: relative;
}
.discount > view > image {
    width: 35rpx;
    height: 35rpx;
    margin: 7rpx 20rpx 0 0;
    float: left;
}
.discount > view > text {
    display: block;
    height: 50rpx;
    line-height: 50rpx;
    float: left;
}
.vip_details {
    width: 90vw;
    height: 400rpx;
    background: #ffffff;
    margin: auto;
    border-radius: 15rpx;
    overflow: hidden;
    position: relative;
}
.VDetalis_head {
    width: 85vw;
    height: 80rpx;
    padding: 0 0 0 5vw;
    background: #e5e6ed;
    line-height: 80rpx;
    color: #3e3630;
    font-size: 24rpx;
}
.progressBar {
    width: 80vw;
    height: 170rpx;
    margin: 0 auto;
    position: relative;
}
.progressBarB {
    width: 12%;
    margin: 50rpx 0 0 0;
    position: absolute;
    left: -35rpx;
}
.progressBar_n {
    display: block;
    width: 100%;
    height: 30rpx;
    line-height: 30rpx;
    border-radius: 8rpx;
    text-align: center;
    background: #fac600;
    margin: 0 auto;
    color: #ffffff;
    font-size: 22rpx;
}
.progressBar_nx {
    display: block;
    width: 2rpx;
    height: 40rpx;
    background: #fac600;
    margin: 0 auto;
}
.progressBar_x {
    width: 80vw;
    height: 4rpx;
    position: absolute;
    bottom: 45rpx;
}
.progressBar_x:after {
    clear: both;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}
.progressBar_white {
    width: 77vw;
    height: 4rpx;
    background: #dedede;
    float: left;
}
.progressBar_yellow {
    /* width: 10vw; */
    height: 4rpx;
    background: #fac600;
}
.progressBar_circular {
    width: 2vw;
    height: 2vw;
    margin: -1vw 0 0 0;
    border: 0.5vw solid #dedede;
    border-radius: 50%;
    float: right;
}
.progressBar_start,
.progressBar_end {
    display: block;
    margin-top: 11.5vh;
    color: #757575;
    font-size: 24rpx;
}
.progressBar_start {
    float: left;
}
.progressBar_end {
    float: right;
    margin-right: -1vh;
}
.upgrade {
    width: 100%;
    border-top: 1px solid #efefef;
}
.upgrade > text,
.upgrade > view {
    display: block;
    width: 100%;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    color: #ababab;
    font-size: 24rpx;
}
.upgrade > view {
    font-size: 28rpx;
    line-height: 40rpx;
}
.cardSilverColor {
    color: #4c4c4c;
}
.cardGoldColor {
    color: #bf9849;
}
.cardPlatinumColor {
    color: #956355;
}
.cardMasonryColor {
    color: #4c4674;
}
.cardBlackColor {
    color: #c2c7cd;
}
.cardGradeBorder1 {
    border: 1rpx solid #6e6e6e;
    color: #6e6e6e;
}
.cardGradeBorder2 {
    border: 1rpx solid #bf9849;
    color: #bf9849;
}
.cardGradeBorder3 {
    border: 1rpx solid #956355;
    color: #956355;
}
.cardGradeBorder4 {
    border: 1rpx solid #4c4674;
    color: #4c4674;
}
.cardGradeBorder5 {
    border: 1rpx solid #c2c7cd;
    color: #c2c7cd;
}
.timeColor1 {
    color: #6e6e6e;
}
.timeColor2 {
    color: #c39d52;
}
.timeColor3 {
    color: #d1836e;
}
.timeColor4 {
    color: #9188d3;
}
.timeColor5 {
    color: #798289;
}
.integralColor1 {
    color: #4c4c4c;
}
.integralColor2 {
    color: #b38832;
}
.integralColor3 {
    color: #b34e32;
}
.integralColor4 {
    color: #333366;
}
.integralColor5 {
    color: #c2c7cd;
}
.privilege_list-item {
    position: relative;
}
.privilege_list-item2 {
    position: relative;
}
.privilege_list-item3 {
    position: relative;
}
.badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(70%);
    padding: 6rpx 13rpx;
    background: #f7a14a;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
}